<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Flying Saucer: CSS Borders Support</title>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
    <style>
      body {
        font-family: tahoma, verdana, arial;
      }
      #fslogo {
        border-style: none;
        text-decoration: none;
        font-family: tahoma, verdana, arial;
        font-size: 20pt;
        font-weight: bold;
        margin: 0pt;    
        padding: 0pt;   
        margin-bottom: 10pt;
      }
      #pagebyline {
        border-style: none;
        font-family: tahoma, verdana, arial;
        font-size: 16pt;
      }

      div.sample {
          width: 200px; 
          font-family: monospace;
          font-size: 0.9em;
          background-color: #efefff;
          padding: 10px;
          margin: 5px 5px 5px 5px;
          border-style: solid;
          border-width: 1px;
          border-color: maroon;
      }

      #dashed { border-style: dashed; border-width: 1px; }
      #dotted { border-style: dotted; border-width: 1px; }
      #inset  { border-style: inset; border-width: 2px; }
      #outset { border-style: outset; border-width: 2px; }
      #ridge  { border-style: ridge; border-width: 2px; }
      #groove { border-style: groove; border-width: 2px; }
      #double { border-style: double; border-width: 2px; }

      #two_sided { border-style: dashed solid dashed solid; border-width: 2px; }
      #three_sided { border-style: dashed solid dotted solid; border-width: 2px; }
      #four_sided { border-style: dashed solid dotted ridge; border-width: 4px; }

      #one_color { border-style: solid; border-color: red; border-width: 4px; }
      #two_color { border-style: solid; border-color: red black; border-width: 4px; }
      #three_color { border-style: solid; border-color: red blue black; border-width: 4px; }
      #four_color { border-style: solid; border-color: red blue black green; border-width: 4px; }
    </style>
  </head>
  <body>
    <p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
    <p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
    <p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
    <span id="pagebyline">
      <span id="dotted">CSS</span>  
      <span id="double">Border</span> 
      <span id="dashed">Support</span> 
    </span><br />
      <p><b>Border support includes</b>: CSS border styles, colors, width, on any or all four sides of a box. You can apply both border shorthand "border: 1px solid black") or individual border properties ("border-style: dashed") to all sides or to individual sides. Shorthand expansion allows you to specify properties for one, two, three or four sides, in any order. To make the border samples easier to see, we've colored the background. Note that some border effects only show properly with a larger border width.</p>
      <br />

    <table style="width: 100%" cellspacing="2" cellpadding="2">
    <tr>
        <td>
        <div class="sample">1px solid border</div>
      </td>
        <td>
        <div id="dashed" class="sample">1px dashed</div>
      </td>
    </tr>
    <tr>
        <td>
        <div id="dotted" class="sample">1px dotted</div>
      </td>
        <td>
        <div id="inset" class="sample">4px inset</div>
      </td>
    </tr>
    <tr>
        <td>
        <div id="outset" class="sample">4px outset</div>
      </td>
        <td>
        <div id="ridge" class="sample">4px ridge</div>
      </td>
    </tr>
    <tr>
        <td>
        <div id="groove" class="sample">4px grooved</div>
      </td>
        <td>
        <div id="double" class="sample">4px double</div>  
      </td>
    </tr>
    <tr>
        <td>
        <div id="two_sided" class="sample">2px different</div>
      </td>
        <td>
        <div id="three_sided" class="sample">2px three different</div>
      </td>
    </tr>
    <tr>
        <td>
        <div id="four_sided" class="sample">2px four different</div>
      </td>
        <td>
        <div id="one_color" class="sample">2px red</div>
      </td>
    </tr>
    <tr>
        <td>
        <div id="two_color" class="sample">2px two colors</div>
      </td>
        <td>
        <div id="three_color" class="sample">2px three colors</div>
      </td>
    </tr>
    <tr>
        <td colspan="2">
        <div id="four_color" class="sample">2px four colors</div>
      </td>
    </tr>
    </table>
  </body>
</html>

